<template>
    <div class="staffManage" ref="homeRef">
        <van-nav-bar title="员工管理" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" />
        <div class="list">
            <div class="item" v-for="i in list" :key="i.id">
                <div class="content">
                    <div class="left">
                        <img :src="i.avatar" alt="">
                    </div>
                    <div class="right">
                        <div class="info">
                            <span>{{ i.name }}</span>
                            <!-- <span class="blue">¥150.00</span> -->
                        </div>
                        <div class="info">
                            <span class="gray"></span>
                            <!-- <span class="blue"><van-switch v-model="checked" active-color="#2CB9A4" size="14" /></span> -->
                        </div>
                        <div class="info">
                            <span class="gray">{{ i.mobile }}</span>
                        </div>
                    </div>
                </div>
                <div class="operate">
                    <div @click="edit(i)">
                        <van-button block native-type="submit" size="mini" color="#2CB9A4" plain>
                            编辑
                        </van-button>
                    </div>
                    <div @click="delet(i)">
                        <van-button block native-type="submit" size="mini" color="#FF6666" plain>
                            删除
                        </van-button>
                    </div>
                </div>
            </div>
            <noData :list="list" :lastPage="last_page" :page="page" />
        </div>
        <div class="bot">
            <div class="addStaff" @click="add">
                <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)"
                    size="small">
                    新增员工
                </van-button>
            </div>
            <!-- <div class="managePosition" @click="position">
                <van-button round block native-type="submit" size="small" color="#2CB9A4" plain>
                    岗位管理
                </van-button>
            </div> -->
        </div>
    </div>
</template>
<script setup>
import {
  showToast
} from 'vant';
import 'vant/es/toast/style';
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { showConfirmDialog } from 'vant';
import { listUser ,delUser} from "@/services";
import 'vant/es/dialog/style';
import { onMounted, watch } from 'vue';
import noData from "@/components/noData/noData.vue"
import useScroll from '@/hooks/useScroll'
const router = useRouter();
const checked = ref(true);
const list = ref([])
const last_page = ref(1)
const page = ref(1)
onMounted(() => {
    getList()
})
//获取列表
const getList = async () => {
    let res = await listUser({ page: page.value })
    list.value = [...list.value, ...res.data.data]
    last_page.value = res.data.last_page
    // console.log(list.value, last_page.value)
}
// 监听滚动到底部
const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
console.log(homeRef.value)
watch(isReachBottom, (newValue) => {
    if (newValue) {
        if (page.value == last_page.value) {
            return
        } else {
            page.value++
            getList()
        }
    }
})
// 返回按钮
const onClickLeft = () => {
    router.back();
};
const edit = (i) => {
    router.push({
        path: '/staffAdd',
        query:i
    });
};
const add = () => {
    router.push({
        path: '/staffAdd'
    });
};
const position = () => {
    router.push({
        path: '/position'
    });
};
const delet = (e) => {
    console.log(e)
    let {name} = e
    let {id} = e
    showConfirmDialog({
        title: '提示',
        confirmButtonColor: '#218CC9',
        message:
            `您确认删除姓名为${name}的员工吗？`,
    })
        .then(async () => {
            let res = await delUser({id})
            showToast('删除员工成功');
            list.value = []
            getList()
        })
        .catch(() => {
            // on cancel
        });
}
</script>
<style>
:root {
    --van-switch-node-size: 0.8rem !important;
}
</style>
<style scoped lang="scss">
// ::v-deep .van-switch{
//     height: 15px !important; 
// }
.staffManage {
    background: #F6F6F6;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;

    // padding-bottom: 60px;
    .list {
        padding: 60px 10px;

        .item {
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            padding: 10px;
            border-radius: 8px;
            background: #FFF;
            box-shadow: 0px 0px 10px 0px rgba(8, 23, 56, 0.05);

            .operate {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-top: 10px;

                div {
                    width: 25%;
                    margin-left: 10px;
                }
            }

            .content {
                display: flex;
                border-bottom: 1px solid rgba(217, 217, 217, 0.60);
                padding-bottom: 10px;

                .left {
                    width: 70px;

                    img {
                        width: 63px;
                        height: 63px;
                        border-radius: 5px;
                    }
                }

                .right {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .info {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 2px;
                        margin-top: 1px;
                    }
                }

                .gray {
                    color: #979797;
                    font-family: PingFang SC;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                }

                .blue {
                    color: #2CB9A4;
                    font-family: PingFang SC;
                    font-size: 12px;
                }
            }

        }
    }

    .bot {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        height: 50px;
        align-items: center;
        box-shadow: 0px 0px 10px 0px rgba(8, 23, 56, 0.05);

        .addStaff {
            width: 45%;
        }

        .managePosition {
            width: 45%;
        }
    }
}
</style>